<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable"> <!-- 微信端点击输入框页面放大 -->
		<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<title>输入框听话</title>
	</head>
	<body style="border: 1px solid #000000;">
		   <div class="comms">
				  <!-- top -->
					<div class="comms-top comms-st">
						<input placeholder="我是头部输入框" />
					</div>
					<!-- center -->
					<div class="comms-conter">
						我是中间件
					</div>
					<!-- bootn -->
				 	<div class="comms-bootn comms-st comms-pk" id="km">
						<input placeholder="我是底部输入框"  id="iput1" />
				 </div>
			 </div>
			 <script>
//			 	onBlur:当失去输入焦点后产生该事件
//				onFocus:当输入获得焦点后，产生该文件
//				Onchange:当文字值改变时，产生该事件
//				Onselect:当文字加亮后，产生该文件
// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
    return document.documentElement.clientHeight || document.body.clientHeight;
}
				 let sm=document.getElementById("iput1")
				 let km=document.getElementById("km")
				 var timer
				 // 输入框获得焦点时，将元素设置为position:static，设置timer
				 sm.addEventListener('focus', function(e){
				 	km.classList.remove("input-fixed");
				 	km.classList.add("input-static");
				 	console.log("0000")
					timer = setInterval(()=>{
						// document.body.scrollTop = document.documentElement.scrollHeight||document.body.scrollHeight
					
					document.body.style.height=getViewPortHeight()+"px"
					km.style.bottom=40+"px"
						console.log("top",document.body.scrollHeight)
					},100)
				 })

				// 输入框失去焦点时，将元素设置为 position:fixed，清除timer
				sm.addEventListener('blur', function(e){
				 	km.classList.remove("input-static");
				 	km.classList.add("input-fixed");
					let sp=getViewPortHeight()-0
					console.log("km",sp)
					km.style.bottom=(sp-40)+"px"
				 	console.log("2222")
					clearInterval(timer)
					console.log("tope",document.body.scrollTop)
				 })

//				 sm.addEventListener('input', function(e){
//					setTimeout(function(){
//						e.target.scrollIntoView(true);
//						console.log("eeee",e.target.value)
//					},200);
//				 })
				 
			 </script>
			 <style>
				 .comms{width: 100%;height: 100%;}
				 .comms-st{width: 100%;height: 40px; line-height: 40px; font-size: 16px;
									 left: 0;border: 1px solid indianred;}
					.comms-st input{width: 90%; margin: 0 auto; border-radius:15px; height: 30px; 
					 line-height: 30px; border: 1px solid bisque; display: block; 
					 margin-top: 5px;outline: none }
				 .comms-top{position: fixed;top: 0;}
				 .comms-bootn{position: fixed;bottom: 0; }
				 .comms-conter{padding: 40px 0;}
				 /*.comms-pk{bottom: 20px;}*/
				 
				 .input-static{position: static !important;}
				 .input-fixed{position: fixed !important;left: 0; bottom: 0;}
				 html,body{height: 100%;}
			 </style>
	</body>
</html>
